<template>
  <div class="layout-col flex2 bss">
    <div class="ww100 flex-bc plr12 ptb8 bs4">
      <div class="flex-sc">
        <span class="f15 fw">设备</span>
      </div>
      <div class="flex-ec flex1 h32">
        <div class="rad4 ptb6 plr10 flex-cc cursor bgi3 white ml10" 
          v-if="state.content.find(v=>{return typeof(v.key) == 'object'}) && state.content.find(v=>{return typeof(v.key) == 'object'})['key'].hasOwnProperty('add')" 
          @click.stop="handleClick('add', state.addItem)">
          <i-ep-plus class="f12 fw" /><span class="f14 ml5">{{state.content.find(v=>{return typeof(v.key) == 'object'})['key'].add}}</span>
        </div>
      </div>
    </div>
    <div class="row bgi22">
      <div :style="{textAlign: v.align, paddingRight: v.name=='操作'?'10px': 'inherit'}" v-for="(v, i) in state.content" :key="i" v-show="v.show" :class="v.width">{{v.name}}</div>
    </div>
    <div class="flex1 overlay ww100 flex-col-ss">
      <el-tree 
      class="ww100" 
      ref="treeRef" 
      :data="state.tree"
      :node-key="state.key" 
      :current-node-key="defaultId"
      :props="defaultProps"
      highlight-current    
      accordion
      @node-click="handleNodeClick"
      empty-text="暂无数据">
        <template #default="{ node, data }">
          <span class="row">
            <div v-show="v.show" :class="v.width" :style="{textAlign: v.align}" v-for="(v, i) in state.content" :key="i">
              <span v-if="typeof(v.key) == 'object'" class="i21 cursor mlr5" v-for="(vv, kk, ii) in v.key" :key="ii" :class="kk=='add'?'none':''" @click.stop="handleClick(kk, data)">{{vv}}</span>
              <span v-else-if="v.key=='*'">{{index+1}}</span>
              <span v-else>{{isNull(data[v.key]) && v.key!=''? '/' : data[v.key]}}</span>
            </div>
          </span>
        </template>
      </el-tree>
    </div>
    <Add @init="init" :state="state" ref="exposeRef" />
  </div>
</template>

<script lang="ts" setup>
  const route = useRoute()
	const { proxy }:any = getCurrentInstance()
  const publicStore = proxy.publicStore()
  const configStore = proxy.configStore()
  const state = reactive({
	  ...publicStore.$state,
    key: 'id',
    parent: 'parent_id',
    content: [
      { width: 'flex1', show: true, align: 'start', key: 'name', name: '名称' }, 
    ],
  })
  let exposeRef = $ref()
  let treeRef = $ref()
  let defaultProps = {
    children: 'children',
    label: 'name',
  }
  let defaultId = $ref()

  onMounted(async() => {
    state.form = route.query
    init()
  })


  const init = async() => {
    let query = {"o": "o_sensor", "p": [publicStore.distributId], "i": 0}
    let params = {queryApi: query}
    let res = await publicStore.post(params)
    let sensorList = proxy.isNull(res)? [] : res
    let query2 = getQuery(sensorList)
    let params2 = {queryApi2: query2}
    let res2 = await publicStore.post(params2)
    let measureList = proxy.isNull(res2)? [] : res2
    let list = geList(sensorList, measureList)
    state.list = sensorList.concat(list)
    state.tree = proxy.treeData(state.list, state.key, state.parent, 'children')
    console.log('state.tree---', state.tree)
    let node = proxy.findNode(state.tree, (node) => { return !node.children })
    await nextTick()
    handleNodeClick(node)
  }

  const getQuery = (val) => {
    let tempArr = [] 
    val.filter(a=>a.class == 0).forEach(v => {
        let exist = tempArr.find(a=>a.p[0] == v.type)
        if(!exist) tempArr.push({"o":"o_sensor_template_measure_property","p":[v.type]})
    })
    return tempArr
  }

  const geList = (sensorList, measureList) => {
    let tempArr = [] 
    sensorList.filter(a=>a.class == 0).forEach(v => {
        let arr = measureList.filter(a=>a.sensor_type == v.type)
        console.log('arr', arr)
        if(arr){
            arr.forEach((vv, ii) => {
                delete vv.id
                let temp = Object.assign({id: v.id + '_' +vv.code + '_' + ii, parent_id: v.id}, vv)
                tempArr.push(temp)
            })
        }
    })
    return tempArr
  }

  const handleNodeClick = async(val) => {
    defaultId = val[state.key]
    treeRef.setCurrentKey(defaultId, true)
    publicStore.active = val
  }

</script>
  
<style scoped lang="scss">

</style>
  